<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
</head>
<body>
    <!--三级联动 - 两个二级联动-->
    <select id="province">
    </select>
    <select id="city">
        <option value=""></option>
    </select>
    <select id="country">
        <option value=""></option>
    </select>
    <script src="./js/createXMLHttpRequest对象.js"></script>
    <script>
        //获取省份、城市下拉列表
        var provinceElement = document.getElementById('province')
        var cityELement = document.getElementById('city')
        var datas;
        //1.当页面加载完毕后，动态获取省份信息
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                //得到服务器端返回的数据
                var response = xhr.responseText;
                //将JSON字符串转换成JSON对象
                datas = JSON.parse(response)
                //得到数组类型的对象 - 遍历
                for(var i = 0;i<datas.length;i++){  
                    var data = datas[i]
                    var province = data.province;
                    //将数据更新到HTML页面中
                    var opt = document.createElement('option')
                    opt.setAttribute('value',province)
                    opt.textContent = province;
                    provinceElement.appendChild(opt)
                }
            }
        }
        xhr.open('get','data/server1.json');
        xhr.send(null);

        //给省份下拉列表绑定change事件
        provinceElement.addEventListener('change',function(){
            //给城市下拉列表的选项清空
            var cityOpts = cityELement.options
            for(var k = 1;k<cityOpts.length;k++){
                cityELement.removeChild(cityOpts[k])
                k--;
            }
            
            //1.用户选择的省份信息
            var opts = provinceElement.options;//获取指定下拉列表所有选项
            var index = provinceElement.selectedIndex;//被选中<option>的索引值
            var opt = opts.item(index)
            var provinceName = opt.getAttribute('value')
            //2.根据省份信息获取对应的城市信息
            for(var i = 0;i<datas.length;i++){  
                    var data = datas[i]
                    var province = data.province;
                   if(provinceName === province){
                       //获取对应的城市信息
                       var cities = data.cities;
                       for(var j=0;j,cities.length;j++){
                           var city = cities[j].city
                           //将城市信息更新到HTML页面
                           var opt = document.createElement('option')
                           opt.setAttribute('value',city)
                           opt.textContent = city
                           cityELement.appendChild(opt)

                       }
                   }
                }
        })


        function createXMLHttpRequest(){    
            var httpRequest;
            if(window.XMLHttpRequest){
                httpRequest = new XMLHttpRequest();
            }else if(window.ActiveXObject){//适用于IE浏览器
                try{
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");//IE 7+
                }catch(e){
                    try{
                        httpRequest = new ActiveXObject ("Microsoft.XMLHTTP");//IE 6-
                    }catch(e){}
                }
            }
            return httpRequest;
        }
    </script>
</body>
</html>